<template>
    <div class="jcComment">
        <h3>精彩评论</h3>
        <div class="commentBox" v-for="(item,index) in comment.hotComments" :key="index">
            <div class="txBox">
                <img :src="item.user.avatarUrl" alt="">
            </div>
            <div class="contentBox">
                <div class="userInfoBox">
                    <div class="userInfo">
                        <p class="nickName">{{item.user.nickname}}</p>
                        <p class="time">{{changeTime(item.time)}}</p>
                    </div>
                    <div class="zanBox">
                        <span :class="{'liked':item.liked}">{{changeLikeCount(item.likedCount)}}</span>
                        <div class="iconZan" @click="changeZan(item.liked,index,item.commentId)">
                            <img src="../../../assets/images/赞.png" v-if="!item.liked" alt="">
                            <img src="../../../assets/images/赞1.png" v-if="item.liked" alt="">
                        </div>
                    </div>
                </div>
                <p class="content">{{item.content}}</p>
            </div>
        </div>
        <div class="more">
            全部精彩评论
        </div>
    </div>
</template>

<script>
import util from "@/assets/js/util.js";
export default {
    props:["comment","detail"],
    methods: {
        changeTime:util.transformDate,
        changeLikeCount:util.changeLikeCount,
        changeZan(liked,index,commentId){
            this.comment.hotComments[index].liked = !liked;
            if(liked){
                this.$http.get("comment/like",{
                    params:{
                        id:this.detail.songs[0].id,
                        cid:commentId,
                        t:0,
                        type:0
                    }
                }).then(()=>{
                    this.$toast('取消点赞')
                })
            }else{
                 this.$http.get("comment/like",{
                        params:{
                            id:this.detail.songs[0].id,
                            cid:commentId,
                            t:1,
                            type:0
                        }
                }).then(()=>{
                    this.$toast("点赞成功");
                })
            }
        }
    },
    computed: {
    },
    created() {
        this.$http.get("/comment/hot",{
            params:{
                id:this.detail.songs[0].id,
                type:0,
                limit:20
            }
        }).then(res=>{
            console.log(res)
        })
    }
}
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    .jcComment{
        padding: vw(10) vw(24);
        border-bottom: 1px solid #c3c3c3;
        h3{
            font-size: vw(18);
        }
        .commentBox{
            padding: vw(16) 0;
            border-bottom: 1px solid #f3f3f3;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .txBox{
                width: vw(40);
                height: vw(40);
                border-radius: 50%;
                font-size: 0;
                overflow: hidden;
                img{
                    width: 100%;
                    display: block;
                }
            }
            .contentBox{
                width: 83%;
                margin-left: vw(6);
                .userInfoBox{
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-start;
                    .userInfo{
                        .nickName{
                            font-size: vw(13);
                        }
                        .time{
                            margin-top: vw(4);
                            font-size: vw(12);
                            color: #939393;
                        }
                    }
                    .zanBox{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        span{
                            font-size: vw(14);
                            color: #939393;
                        }
                        .iconZan{
                            width: vw(22);
                            img{
                                width: 100%;
                            }
                        }
                        .liked{
                            color:#fd0808;
                        }
                    }
                }
                .content{
                    font-size: vw(14);
                    line-height: 1.8em;
                    margin-top: vw(10);
                    margin-bottom: vw(10);
                }
            }
        }
        .more{
            width: vw(150);
            height: vw(32);
            border-radius: vw(20);
            border: 1px solid #d9d9d9;
            font-size: vw(14);
            text-align: center;
            line-height: vw(32);
            color: #666666;
            margin: 0 auto vw(8);
        }
    }
</style>